<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
		<title>木及科技网络公司--首页</title>
	</head>
	<body>
		<div class="indexHead">
			<img src="images/logo.png" class="indexLogo"/>
			<div class="ourPhone">
				<img src="images/phone.png" class="phoneLogo"></img>
				<span>13819182733</span>
			</div>
			<ul class="indexNavBox">
				<a href="#">
					<li>首页</li>
				</a>
				<a href="#">
					<li>服务</li>
				</a>
				<a href="#">
					<li>案例展示</li>
				</a>
				<a href="#">
					<li>新闻资讯</li>
				</a>
				<a href="#">
					<li>关于我们</li>
				</a>
			</ul>
			
		</div>
		<div class="swiper-container">
		    <div class="swiper-wrapper">
		        <div class="swiper-slide indexLb1">
		        	<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容11</p>
		        </div>
		        <div class="swiper-slide  indexLb2">
		        	<p class="ani" swiper-animate-effect="bounce" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容22</p>
		        </div>
		        <div class="swiper-slide indexLb3">内容33</div>
		        <div class="swiper-slide indexLb4">内容44</div>
		        
		    </div>
		    <!-- 如果需要分页器 -->
		    <div class="swiper-pagination"></div>
		    
		    <!-- 如果需要导航按钮 -->
		    <div class="swiper-button-prev swiper-button-white"></div>
		    <div class="swiper-button-next swiper-button-white"></div>
		</div>
		<div class="indexMiddleLcm">
			<div class="indexHeaderLcm">
				<span class="grayXL"></span>
				<h3>服务领域</h3>
				<span class="grayXR"></span>
			</div>
			<p class="middleTxt">木及科技有限公司/成立于/...</p>
			<div class="imgAbouWe">
				<div class="weWorks1">
					<img src="images/img1.jpg"/>
					<p class="litleLcm">移动应用开发</p>
					<p class="contentLcm">以移动互联网及智能终端为载体，将用户和企业进行连接。公司提供的移动端服务具有高度定制化...</p>
					<ul class="appButtonLcm">
						<a href="#"><li>APP开发</li></a>
						<a href="#"><li>手机应用开发</li></a>
						<a href="#"><li>ipad应用开发</li></a>
						<a href="#"><li>UI界面设计</li></a>
						<a href="#"><li>交互设计</li></a>
						<a href="#"><li>ios应用开发</li></a>
					</ul>
				</div>
				<div class="weWorks2">
					<img src="images/img1.jpg"/>
					<p class="litleLcm">移动应用开发</p>
					<p class="contentLcm">以移动互联网及智能终端为载体，将用户和企业进行连接。公司提供的移动端服务具有高度定制化...</p>
					<ul class="appButtonLcm">
						<a href="#"><li>APP开发</li></a>
						<a href="#"><li>手机应用开发</li></a>
						<a href="#"><li>ipad应用开发</li></a>
						<a href="#"><li>UI界面设计</li></a>
						<a href="#"><li>交互设计</li></a>
						<a href="#"><li>ios应用开发</li></a>
					</ul>
				</div>
				<div class="weWorks3">
					<img src="images/img1.jpg"/>
					<p class="litleLcm">移动应用开发</p>
					<p class="contentLcm">以移动互联网及智能终端为载体，将用户和企业进行连接。公司提供的移动端服务具有高度定制化...</p>
					<ul class="appButtonLcm">
						<a href="#"><li>APP开发</li></a>
						<a href="#"><li>手机应用开发</li></a>
						<a href="#"><li>ipad应用开发</li></a>
						<a href="#"><li>UI界面设计</li></a>
						<a href="#"><li>交互设计</li></a>
						<a href="#"><li>ios应用开发</li></a>
					</ul>
				</div>
			</div>
		</div>
		<!--销售案例-->
		<div class="caseShow">
			<div class="indexHeaderLcm">
				<span class="grayXL"></span>
				<h3>案例展示</h3>
				<span class="grayXR"></span>
			</div>
			<p class="contentText">我们的服务经验从智能设备到企业协作。在上述领域都拥有案例，并有自己的深刻理解，形成了成熟有效的解决方案</p>
			<div class="PblButtonBox">
				<div class="pblButton1">移动端应用开发</div>
				<div class="pblButton2">高端网站建设</div>
				<div class="pblButton3">电商与平台开发</div>
			</div>
		
		<!--瀑布流代码-->
			<div id="indexPblLcm">  
			  <div class="pblItem">
			  	<div class="caseBoxLcm">
			  		<h5>案例标题</h5>
			  		<a href="#"><img src="images/img2.jpg" alt="案例展示图片" class="caseThing"/></a>
			  		<a href="#" class="caseContent">杭州老板电信<br />爸爸吧实名<br />登记卡萨丁接口加速度计卡时间段可打了款</a>	
			  	</div>
			  	<hr />
			  	<div class="caseTextBox">
			  		<span>微信公众号建设</span>
			  		<a href="#" class="imgLink">
			  			<img class="linkLogo" src="images/linkLogo.png" alt="链接logo" />
			  			<img class="linkLogo1" src="images/linkLogo1.png" alt="链接logo" />
			  		</a>
			  	</div>
			  </div>
			  <!--瀑布流分割-->
			  <div class="pblItem">
			  	<div class="caseBoxLcm">
			  		<h5>案例标题</h5>
			  		<a href="#"><img src="images/img3.jpg" alt="案例展示图片" class="caseThing"/></a>
			  		<a href="#" class="caseContent">杭州老板电信爸爸吧实名登记卡萨丁接口加速度计卡时间段可打了款</a>	
			  	</div>
			  	<hr />
			  	<div class="caseTextBox">
			  		<span>微信公众号建设</span>
			  		<a href="#" class="imgLink">
			  			<img class="linkLogo" src="images/linkLogo.png" alt="链接logo" />
			  			<img class="linkLogo1" src="images/linkLogo1.png" alt="链接logo" />
			  		</a>
			  	</div>
			  </div>
			  <!--瀑布流分割-->
			  <div class="pblItem">
			  	<div class="caseBoxLcm">
			  		<h5>案例标题</h5>
			  		<a href="#"><img src="images/img1.jpg" alt="案例展示图片" class="caseThing"/></a>
			  		<a href="#" class="caseContent">杭州老<br />板电信爸<br />爸吧实名登记卡萨丁接<br />口加速度计卡时间段可打了款</a>	
			  	</div>
			  	<hr />
			  	<div class="caseTextBox">
			  		<span>微信公众号建设</span>
			  		<a href="#" class="imgLink">
			  			<img class="linkLogo" src="images/linkLogo.png" alt="链接logo" />
			  			<img class="linkLogo1" src="images/linkLogo1.png" alt="链接logo" />
			  		</a>
			  	</div>
			  </div>
			  <!--瀑布流分割-->
			  <div class="pblItem">
			  	<div class="caseBoxLcm">
			  		<h5>案例标题</h5>
			  		<a href="#"><img src="images/img1.jpg" alt="案例展示图片" class="caseThing"/></a>
			  		<a href="#" class="caseContent">杭州老<br />板电信爸<br />爸吧实名登记卡萨丁接<br />口加速度计卡时间段可打了款</a>	
			  	</div>
			  	<hr />
			  	<div class="caseTextBox">
			  		<span>微信公众号建设</span>
			  		<a href="#" class="imgLink">
			  			<img class="linkLogo" src="images/linkLogo.png" alt="链接logo" />
			  			<img class="linkLogo1" src="images/linkLogo1.png" alt="链接logo" />
			  		</a>
			  	</div>
			  </div>
			  <!--瀑布流分割-->
			  <div class="pblItem">
			  	<div class="caseBoxLcm">
			  		<h5>案例标题</h5>
			  		<a href="#"><img src="images/img3.jpg" alt="案例展示图片" class="caseThing"/></a>
			  		<a href="#" class="caseContent">杭州老板电信爸爸吧实名登记卡萨丁接口加速度计卡时间段可打了款</a>	
			  	</div>
			  	<hr />
			  	<div class="caseTextBox">
			  		<span>微信公众号建设</span>
			  		<a href="#" class="imgLink">
			  			<img class="linkLogo" src="images/linkLogo.png" alt="链接logo" />
			  			<img class="linkLogo1" src="images/linkLogo1.png" alt="链接logo" />
			  		</a>
			  	</div>
			  </div>
			</div>
			<div class="moreButtonLcm">查看更多</div>
		</div>
		<!--服务流程盒子-->
		<div class="indexFwBox">
			<div class="indexHeaderLcm">
				<span class="grayXL"></span>
				<h3>服务流程</h3>
				<span class="grayXR"></span>
			</div>
			<p class="contentText">优化产品流程，增强产品的易用性，提高使用者的工作效率，科学地组织生产...</p>
			<!--服务流程盒子-->
			<ul class="fwFlowBox">
				<li>
					<img src="images/linkLogo1.png" alt="" />
					<div class="textContent">需求沟通</div>
					<p>倾听客户需求，了解用户使用</p>
				</li>
				<li>
					<img src="images/linkLogo1.png" alt="" />
					<div class="textContent">需求沟通</div>
					<p>倾听客户需求，了解用户使用</p>
				</li>
				<li>
					<img src="images/linkLogo1.png" alt="" />
					<div class="textContent">需求沟通</div>
					<p>倾听客户需求，了解用户使用</p>
				</li>
				<li>
					<img src="images/linkLogo1.png" alt="" />
					<div class="textContent">需求沟通</div>
					<p>倾听客户需求，了解用户使用</p>
				</li>
				<li>
					<img src="images/linkLogo1.png" alt="" />
					<div class="textContent">需求沟通</div>
					<p>倾听客户需求，了解用户使用</p>
				</li>
				<li>
					<img src="images/linkLogo1.png" alt="" />
					<div class="textContent">需求沟通</div>
					<p>倾听客户需求，了解用户使用</p>
				</li>
			</ul>
		</div>
		<!--最新签约盒子-->
		<div class="indexNewCon">
			<div class="indexHeaderLcm">
				<span class="grayXL"></span>
				<h3>最新签约</h3>
				<span class="grayXR"></span>
			</div>
			<div class="newConAll">
				<div>
					<img src="images/img1.jpg" alt="官方图标" />
					<p class="aboutThis">
						<span class="AboutThistime">2017-12-10</span>
						<span class="aboutThisCont">阿斯蒂芬水电费水电费</span>
						<span class="abouThisfind">find out more</span>
					</p>
				</div>
				<div>
					<img src="images/img1.jpg" alt="官方图标" />
					<p class="aboutThis">
						<span class="AboutThistime">2017-12-10</span>
						<span class="aboutThisCont">阿斯蒂芬水电费水电费</span>
						<span class="abouThisfind">find out more</span>
					</p>
				</div>
				<div>
					<img src="images/img1.jpg" alt="官方图标" />
					<p class="aboutThis">
						<span class="AboutThistime">2017-12-10</span>
						<span class="aboutThisCont">阿斯蒂芬水电费水电费</span>
						<span class="abouThisfind">find out more</span>
					</p>
				</div>
				<div>
					<img src="images/img1.jpg" alt="官方图标" />
					<p class="aboutThis">
						<span class="AboutThistime">2017-12-10</span>
						<span class="aboutThisCont">阿斯蒂芬水电费水电费</span>
						<span class="abouThisfind">find out more</span>
					</p>
				</div>
				<div>
					<img src="images/img1.jpg" alt="官方图标" />
					<p class="aboutThis">
						<span class="AboutThistime">2017-12-10</span>
						<span class="aboutThisCont">阿斯蒂芬水电费水电费</span>
						<span class="abouThisfind">find out more</span>
					</p>
				</div>
				<div>
					<img src="images/img1.jpg" alt="官方图标" />
					<p class="aboutThis">
						<span class="AboutThistime">2017-12-10</span>
						<span class="aboutThisCont">阿斯蒂芬水电费水电费</span>
						<span class="abouThisfind">find out more</span>
					</p>
				</div>
			</div>
		</div>
		<div class="indexCallWe">
			<div class="indexHeaderLcm">
				<span class="grayXL"></span>
				<h3>联系我们</h3>
				<span class="grayXR"></span>
			</div>
			<div class="workMap">
				<div class="comMapAbout">
					<div class="header">木及科技公司</div>
					<div class="phone">138-1918-2733</div>
					<p>
						地址：浙江省杭州市余杭区金家渡南路金手指创业园2幢4楼K22<br />
						公司邮编：310000<br />
						邮箱:13819182733@163.com
					</p>
				</div>
			</div>
		</div>
		<!--footer-->
		<div class="indexMoreLcm">
			<p>小程序定制</p>
			<div class="linkOther">
				<a href="#">如何看待最近包发放的雷索病毒</a>
				<a href="#">dsfsdfdsfdsfdsfssssssssssssssssssssss</a>
				<a href="#">sdfsdfdsssssssssssssssssssssss</a>
				<a href="#">sdfsdfdsfsdfdsdsfd</a>
				<a href="#">sdfddfgdfgdsfasdasdasdasddsfdsfsdf</a>
			</div>
			<a href="#" class="more">更多+</a>
		</div>
		<div class="indexBaBox">
			<div class="indexBaBoxTop">©2017 木及科技  法律顾问：（刘律师）浙江星韬律师事务所 联系我们 人才招聘 客户留言</div>
			<div class="indexBaBoxBottom">浙公网安备 33010502001314号 浙ICP备12044399号-8</div>
		</div>
	</body>
	<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/swiper-3.4.2.jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/swiper.animate1.0.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/masonry.pkgd.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//检测是否滑动
		$(document).scroll(function() {
		  if ($(document).scrollTop()>10){
		    $(".indexHead").css({"background":"#000"});
		    console.log($(".indexHead").scrollTop()>10);
		  }
		  if ($(document).scrollTop()<10) {
		    $(".indexHead").css({"background":"transparent"});
		  }
		});
		 var mySwiper = new Swiper ('.swiper-container', {
		    direction: 'horizontal',
		    loop: true,
		    grabCursor:true,
		    autoplay:4000,
		    // 如果需要分页器
		    pagination: '.swiper-pagination',  
		    // 如果需要前进后退按钮
		    nextButton: '.swiper-button-next',
		    prevButton: '.swiper-button-prev',
		    onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
			    swiperAnimateCache(swiper); //隐藏动画元素 
			    swiperAnimate(swiper); //初始化完成开始动画
			  }, 
			  onSlideChangeEnd: function(swiper){ 
			    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
			  } 
		  })        
		//点击变色
		$(".PblButtonBox div").on("click",function(){
			for(var i=0;i<$(".PblButtonBox div").length;i++){
				$(".PblButtonBox div")[i].style.background="#eaeaea";
				$(".PblButtonBox div")[i].style.color="#767676";
			}
			this.style.background="#0990e2";
			this.style.color="#fff";
		});
		
		//瀑布流代码实现
		$(function(){  
		  $('#indexPblLcm').masonry({  
		    // options  
		    itemSelector : '.pblItem',  
		    columnWidth : 4  
		  });  
		});
		//点击按钮增加商品信息
//		$('.append-button').on( 'click', function() {
//		  // create new item elements
//		  var $items = $('<div class="grid-item">...</div>');
//		  // append items to grid
//		  $grid.append( $items )
//		    // add and lay out newly appended items
//		    .masonry( 'appended', $items );
//		});
	</script>
</html>
